<style lang="less">
    @import './index.less';
</style>
<template>
    <div class="box1">
        <Button  id="add" type="info" @click="modal1=true" >添加</Button>
        <Button id="dele" type="error">批量删除</Button><br>
        <Modal v-model="modal1" title="添加" >
            <Form ref="addForm" :model="addForm">
                   <FormItem prop='number' label="编号">
                        <Input type="text" v-model='addForm.number' placeholder="请输入编号"/>
                   </FormItem>
                   <FormItem prop='admin' label="用户名">
                        <Input type="text"  v-model='addForm.admin' placeholder="请输入用户名"/>
                   </FormItem>
                <FormItem prop='name' label="昵称">
                        <Input type="text"  v-model='addForm.name' placeholder="请输入昵称"/>
                </FormItem>
            </Form>
            <div slot="footer" style="margin-left: 340px;bottom: 12px;background: white">
               <Button type="text" size="large" @click ='cancel'>取消</Button>&nbsp;&nbsp;
                <Button type="primary" size="large" @click ='sure("addForm")'>确认</Button>
            </div>
        </Modal>
        <Modal v-model="modal2" title="修改用户名" >
          <Row>
              <Col span="12">用户名称：<Input v-model="newName.name"/></Col>
          </Row>
        </Modal>
        <div class="box3">
            <Input v-model="search_number" prefix="ios-search" placeholder="按编号搜索"
                   style="width: auto" @on-change="searchNumber"/>
            <Input id="sou1" prefix="ios-search" placeholder="搜素内容" style="width: auto"/>
            <Button id="sou2" type="primary">搜索</Button>
        </div>
        <div id="box2">
            <template>
            <Table border :columns="columns1" :data="data1">
                <template slot-scope="{ row }" slot="number">
                    <strong>{{row.number}}</strong>
                </template>
                <template slot-scope="{ row, index }" slot="operate">
                    <Button type="success" icon="ios-search"  size="small"
                            style="margin-right: 5px" @click="show(index)">详情</Button>
                    <Button type="info" icon="ios-create-outline"  size="small"
                            style="margin-right: 5px">编辑</Button>
                    <Button type="info" icon="ios-create-outline"  size="small" @click="update(index)">修改用户名</Button>
                </template>
            </Table>
            </template>
        </div>

    </div>
</template>

<script>

export default {

  data () {
    return {
      search_number: '',
      newName: [],
      columns1: [
        {
          type: 'selection',
          width: 60,
          align: 'center'

        },
        {
          title: '编号',
          slot: 'number'
        }, {
          title: '登录名',
          key: 'admin'
        }, {
          title: '用户昵称',
          key: 'name'
        }, {
          title: '最后登录时间',
          key: 'time'
        }, {
          title: '登陆次数',
          key: 'counts'
        }, {
          title: '状态',
          key: 'state',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'md-checkmark-circle',
                  color: '#84C7EE'

                }
              })
            ])
          }
        }, {
          title: '操作',
          slot: 'operate',
          width: 350,
          align: 'center'

        }
      ],
      data1: [{
        number: '004',
        admin: 'xiom',
        name: 'xiom',
        time: '',
        counts: '1',
        state: '',
        operate: ''
      }, {
        number: '001',
        admin: 'lili',
        name: 'lili',
        time: '',
        counts: '8',
        state: '',
        operate: ''
      }, {
        number: '002',
        admin: 'jenert',
        name: '成员',
        time: '',
        counts: '1',
        state: '',
        operate: ''
      }
      ],
      modal1: false,
      modal2: false,
      addForm: {
        number: '',
        admin: '',
        name: ''
      }
    }
  },
  methods: {
    sure (name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$Message.success('Success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    show (index) {
      this.$Modal.info({
        title: '详情',
        content: `编号：${this.data1[index].number}<br>`
      })
    },
    update (index) {
      this.modal2 = true
    }
  }
}
</script>

<style scoped>

</style>
